<template>
  <div>
    <h3>List</h3>
    <hr />
    <!-- to的第一种写法  直接字符串 -->
            <!-- params 传参  第一种方法 - 字符串传参-->
    <router-link to="/list/games/1">去武汉</router-link>/
            <!-- params 传参  第二种方法  - 对象传参  import:如果用对象只能用name来选择路由-->
    <router-link
      :to="{
        name: 'games',
        params: { id: '2' },
      }"
      >去鄂州 </router-link
    >/ <router-link to="/list/games/3">去十堰</router-link>/

    <hr />
    <!-- to的第二种写法  对象-带有path写法 -->
            <!-- query 传参 第一种方法 - 对象 -->
    <router-link
      :to="{
        path: '/list/music',
        query: {
          n: 18,
          m: 25,
        },
      }"
      >老Music</router-link
    >/
            <!-- query 传参 第二种方法 - 字符串传参 -->
    <router-link to="/list/music?n=1&m=2 ">新Music</router-link>/

    <hr />
    <!-- to的第三种写法  对象-带有name写法 -->
            <!-- params 传参 开启props后的获取数据方法 -->
    <router-link
      :to="{
        name: 'news',
        params: {
          id: 1000,
        },
      }"
      >工资</router-link
    >
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: "List",
};
</script>

<style>
</style>
